<template>
  <view class="viewport">
    <fui-nav-bar background="#0052D9" title="筛选" color="#fff" @leftClick="leftClick">
      <fui-icon color="#fff" name="arrowleft"></fui-icon>
    </fui-nav-bar>

    <view class="warp">
      <view class="ul">
        <view class="li">
          <fui-input label="报修主题" borderTop placeholder="请输入"></fui-input>
          <fui-input label="设备名称" :bottomLeft="0" placeholder="请输入"></fui-input>
          <fui-input label="存放位置" :bottomLeft="0" placeholder="请输入"></fui-input>
          <fui-input v-model="emergency" label="紧急程度" :bottomLeft="0" placeholder="请输入">
            <fui-icon :size="50" name="arrowright" @click="show = true"></fui-icon>
          </fui-input>
          <fui-input v-model="audit" label="审核状态" :bottomLeft="0" placeholder="请输入">
            <fui-icon :size="50" name="arrowright" @click="showA = true"></fui-icon>
          </fui-input>
          <fui-input v-model="startTime" label="开始时间" :bottomLeft="0" placeholder="请输入">
            <fui-icon :size="50" name="arrowright" @click="showB = true"></fui-icon>
          </fui-input>
          <fui-input v-model="endTime" label="结束时间" :bottomLeft="0" placeholder="请输入">
            <fui-icon :size="50" name="arrowright" @click="showC = true"></fui-icon>
          </fui-input>
          <fui-input label="提交人" :bottomLeft="0" placeholder="请输入"></fui-input>
        </view>
      </view>
      <fui-picker :options="options" :show="show" @change="change" @cancel="cancel"></fui-picker>
      <fui-picker :options="optionsA" :show="showA" @change="changeA" @cancel="cancelA"></fui-picker>
      <up-calendar :show="showB" :mode="mode" @confirm="confirm" @close="showB = false"></up-calendar>
      <up-calendar :show="showC" :mode="mode" @confirm="confirmC" @close="showC = false"></up-calendar>
    </view>
    <view class="footer">
      <view class="reset" @click="reset">重置</view>
      <view class="reset confirm">确定</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
const leftClick = () => {
  uni.navigateBack();
};
const rightClick = () => {};
// 紧急程度
const show = ref(false);
const emergency = ref('');
const options = ref(['全部', '紧急', '高', '中', '低']);
// 审核状态
const showA = ref(false);
const audit = ref('');
const optionsA = ref(['全部', '待审核', '驳回', '已撤回', '审核中', '已完成', '待维修', '维修中']);

const change = (e) => {
  show.value = false;
  emergency.value = e.value;
  console.log(e, '5656');
};
const changeA = (e) => {
  audit.value = e.value;
  showA.value = false;
  console.log(e);
};

const cancel = () => {
  show.value = false;
};
const cancelA = () => {
  showA.value = false;
};

// 时间选择器开始
const startTime = ref('');
const showB = ref(false);
const mode = ref('single');
const confirm = (e) => {
  startTime.value = e['0'];
  console.log(e, '555');
  showB.value = false;
};

//结束时间选择器
const endTime = ref('');
const showC = ref(false);
const confirmC = (e) => {
  endTime.value = e['0'];
  console.log(e, '555');
  showC.value = false;
};

//重置
const reset = () => {
  emergency.value = '';
  audit.value = '';
  startTime.value = '';
  endTime.value = '';
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.warp {
  flex: 1;
}
.footer {
  display: flex;
  .reset {
    width: 50%;
    display: flex;
    height: 100rpx;
    align-items: center;
    justify-content: space-around;
    border: 1rpx solid #ccc;
    color: #0052d9;
  }

  .confirm {
    color: #fff;
    background-color: #0052d9;
  }
}
</style>
